<template>
  <div class="case-event-container">
    <!-- 左侧内容 -->
    <div class="left-content">
      <!-- 时间趋势分析 -->
      <div class="stat-card">
        <div class="card-title">时间趋势分析</div>
        <div class="time-trend-buttons">
          <button 
            v-for="(item, index) in trendButtons" 
            :key="index"
            :class="{ active: activeTrend === item.type }"
            @click="switchTrend(item.type)"
          >
            {{ item.label }}
          </button>
        </div>
        <div id="timeTrendChart" ref="timeTrendChart" style="height: 200px;"></div>
        <div class="trend-summary">
          <span class="trend-label">{{ activeTrendLabel }}下降</span>
          <span class="trend-value">{{ activeTrendValue }}%</span>
        </div>
      </div>

      <!-- 案件类型多维分析 -->
      <div class="stat-card">
        <div class="card-title">案件类型分析</div>
        <div id="caseTypeChart" ref="caseTypeChart" style="height: 200px;"></div>
        <div class="case-type-details">
          <div class="type-item">
            <span class="type-label">刑事案件</span>
            <span class="type-value">71.4%↓</span>
          </div>
          <div class="type-item">
            <span class="type-label">治安案件</span>
            <span class="type-value">20.3%↓</span>
          </div>
          <div class="type-item">
            <span class="type-label">电诈案件</span>
            <span class="type-value">20.3%↓</span>
          </div>
        </div>
      </div>

      <!-- 治理成效展示 -->
      <div class="stat-card">
        <div class="card-title">治理成效</div>
        <div class="governance-stats">
          <div class="governance-item">
            <div class="governance-value">98%</div>
            <div class="governance-label">破案率</div>
          </div>
          <div class="governance-item">
            <div class="governance-value">95%</div>
            <div class="governance-label">结案率</div>
          </div>
          <div class="governance-item">
            <div class="governance-value">92%</div>
            <div class="governance-label">满意度</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间内容 -->
    <div class="center-content">
      <div class="map-container">
        <div class="card-title">案事件分布地图</div>
        <div id="caseEventMap" ref="caseEventMap"></div>
      </div>

      <div class="case-list">
        <div class="card-title">实时预警</div>
        <div class="warning-items">
          <div class="warning-item" v-for="(item, index) in warningList" :key="index">
            <div class="warning-time">{{ item.time }}</div>
            <div class="warning-content">{{ item.content }}</div>
            <div class="warning-level" :class="item.level">{{ item.level }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="right-content">
      <!-- 时空分析 -->
      <div class="stat-card">
        <div class="card-title">时空分析</div>
        <div id="timeAnalysisChart" ref="timeAnalysisChart" style="height: 200px;"></div>
        <div class="analysis-summary">
          <div class="analysis-item">
            <span class="analysis-label">高发时段</span>
            <span class="analysis-value">18:00-22:00</span>
          </div>
          <div class="analysis-item">
            <span class="analysis-label">重点区域</span>
            <span class="analysis-value">金泉路商圈</span>
          </div>
        </div>
      </div>

      <!-- 联防联控 -->
      <div class="stat-card">
        <div class="card-title">联防联控</div>
        <div class="prevention-stats">
          <div class="prevention-item">
            <div class="prevention-value">256</div>
            <div class="prevention-label">群防群治力量</div>
          </div>
          <div class="prevention-item">
            <div class="prevention-value">98%</div>
            <div class="prevention-label">智慧安防覆盖率</div>
          </div>
        </div>
      </div>

      <!-- 案件下降支撑要素 -->
      <div class="stat-card">
        <div class="card-title">案件下降支撑要素</div>
        <div class="support-factors" ref="supportFactors" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
          <!-- 盗窃案件治理 -->
          <div class="factor-group">
            <div class="factor-title">盗窃案件治理</div>
            <div class="factor-items">
              <div class="factor-item">
                <div class="factor-label">智慧防盗设备安装量</div>
                <div class="factor-value">2022年38套→2024年217套</div>
              </div>
              <div class="factor-item">
                <div class="factor-label">夜间红外报警触发统计</div>
                <div class="factor-value">2024年有效预警32次</div>
              </div>
            </div>
          </div>

          <!-- 电诈案件拦截 -->
          <div class="factor-group">
            <div class="factor-title">电诈案件拦截</div>
            <div class="factor-items">
              <div class="factor-item">
                <div class="factor-label">反诈APP覆盖率</div>
                <div class="factor-value">82%→95%</div>
              </div>
              <div class="factor-item">
                <div class="factor-label">资金紧急止付成功率</div>
                <div class="factor-value">2024年止损83万元</div>
              </div>
            </div>
          </div>

          <!-- 殴打他人案件处置 -->
          <div class="factor-group">
            <div class="factor-title">殴打他人案件处置</div>
            <div class="factor-items">
              <div class="factor-item">
                <div class="factor-label">重点场所酒精检测仪配置</div>
                <div class="factor-value">烧烤店100%覆盖</div>
              </div>
              <div class="factor-item">
                <div class="factor-label">涉酒警情现场处置时间</div>
                <div class="factor-value">平均缩短至25分钟</div>
              </div>
            </div>
          </div>

          <!-- 故意损毁财物防控 -->
          <div class="factor-group">
            <div class="factor-title">故意损毁财物防控</div>
            <div class="factor-items">
              <div class="factor-item">
                <div class="factor-label">联网高清探头新增数</div>
                <div class="factor-value">46个（重点覆盖背街小巷）</div>
              </div>
              <div class="factor-item">
                <div class="factor-label">商户联防巡查记录</div>
                <div class="factor-value">2024年累计制止冲突27起</div>
              </div>
            </div>
          </div>

          <!-- 时空维度穿透分析 -->
          <div class="factor-group">
            <div class="factor-title">时空维度穿透分析</div>
            <div class="factor-items">
              <div class="factor-item">
                <div class="factor-label">刑事案高频时段</div>
                <div class="factor-value">20:00-22:00（占比63%）</div>
              </div>
              <div class="factor-item">
                <div class="factor-label">治安案高频时段</div>
                <div class="factor-value">周末14:00-18:00（较工作日高42%）</div>
              </div>
            </div>
          </div>

          <!-- 网格化治理成效 -->
          <div class="factor-group">
            <div class="factor-title">网格化治理成效</div>
            <div class="factor-items">
              <div class="factor-item">
                <div class="factor-label">重点网格警情降幅TOP3</div>
                <div class="factor-value">
                  <div>第5网格 -78%</div>
                  <div>第9网格 -69%</div>
                  <div>第12网格 -65%</div>
                </div>
              </div>
              <div class="factor-item">
                <div class="factor-label">网格员上报线索转化率</div>
                <div class="factor-value">2024年破案线索占比31%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* global TMap */
import * as echarts from 'echarts'

export default {
  name: 'CaseEventData',
  data() {
    return {
      policeData: [
        { year: 2022, count: 636, percentage: 100 },
        { year: 2023, count: 579, percentage: 91 },
        { year: 2024, count: 226, percentage: 35.5 }
      ],
      criminalData: [
        { year: 2022, count: 28, percentage: 100 },
        { year: 2023, count: 15, percentage: 53.6 },
        { year: 2024, count: 8, percentage: 28.6 }
      ],
      securityData: [
        { year: 2022, count: 64, percentage: 100 },
        { year: 2023, count: 54, percentage: 84.4 },
        { year: 2024, count: 51, percentage: 79.7 }
      ],
      fraudData: [
        { year: 2022, count: 18, percentage: 100 },
        { year: 2023, count: 16, percentage: 88.9 },
        { year: 2024, count: 13, percentage: 79.7 }
      ],
      recentCases: [
        {
          type: '刑事',
          title: '金泉路某小区入室盗窃案',
          time: '2024-03-20',
          status: '已破获'
        },
        {
          type: '治安',
          title: '金泉路夜市打架斗殴事件',
          time: '2024-03-18',
          status: '处理中'
        },
        {
          type: '电诈',
          title: '网络刷单诈骗案',
          time: '2024-03-15',
          status: '已破获'
        }
      ],
      map: null,
      warningList: [
        {
          time: '10:30',
          content: '金泉路商圈发现可疑人员',
          level: '高危'
        },
        {
          time: '09:15',
          content: '某小区发生入室盗窃',
          level: '中危'
        },
        {
          time: '08:45',
          content: '发现疑似电信诈骗活动',
          level: '低危'
        },
        {
          time: '08:30',
          content: '金泉路夜市发生打架斗殴事件',
          level: '高危'
        },
        {
          time: '08:15',
          content: '某小区发生高空抛物事件',
          level: '中危'
        },
        {
          time: '08:00',
          content: '发现可疑车辆在小区周边徘徊',
          level: '低危'
        },
        {
          time: '07:45',
          content: '某商铺发生盗窃未遂事件',
          level: '中危'
        },
        {
          time: '07:30',
          content: '发现疑似传销活动',
          level: '低危'
        }
      ],
      trendButtons: [
        { type: 'police', label: '近三年接处警数', value: '64.5%' },
        { type: 'criminal', label: '刑事发案', value: '71.4%' },
        { type: 'security', label: '治安发案', value: '20.3%' },
        { type: 'fraud', label: '电诈发案', value: '20.3%' }
      ],
      activeTrend: 'police',
      activeTrendLabel: '接处警总数',
      activeTrendValue: '64.5',
      trendData: {
        police: {
          label: '接处警总数',
          value: '64.5',
          data: [636, 579, 226]
        },
        criminal: {
          label: '刑事发案',
          value: '71.4',
          data: [28, 15, 8]
        },
        security: {
          label: '治安发案',
          value: '20.3',
          data: [64, 54, 51]
        },
        fraud: {
          label: '电诈发案',
          value: '20.3',
          data: [18, 16, 13]
        }
      },
      scrollInterval: null,
      scrollSpeed: 50, // 滚动速度（像素/秒）
      scrollPosition: 0,
      isScrolling: true
    }
  },
  mounted() {
    this.initCaseTypeChart()
    this.initMap()
    this.initTimeAnalysisChart()
    this.initTimeTrendChart()
    this.startAutoScroll()
  },
  methods: {
    initCaseTypeChart() {
      const chartDom = this.$refs.caseTypeChart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 起 ({d}%)'
        },
        color: ['#FF4D4F', '#1890FF', '#FAAD14'],
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 28, name: '盗窃' },
            { value: 15, name: '殴打他人' },
            { value: 13, name: '电信诈骗' }
          ],
          label: {
            color: '#7eb9ff',
            formatter: '{b}\n{c}起'
          }
        }]
      }
      myChart.setOption(option)
    },
    initMap() {
      this.map = new TMap.Map(document.getElementById('caseEventMap'), {
        center: new TMap.LatLng(39.744568, 98.493843),
        zoom: 16,
        viewMode: '2D',
        baseMap: {
          type: 'vector',
          features: ['base', 'building2d', 'building3d', 'point', 'label'],
          theme: 'style2'
        },
        mapStyleId: '4c5c88f1c7d2347e99e5e5e7d22afd7f'
      })

      // 添加标记点
      const markers = [
        {
          position: new TMap.LatLng(39.744568, 98.493843),
          properties: {
            title: '金泉路社区',
            type: '社区'
          }
        }
      ]

      // 创建并添加标记图层
      new TMap.MultiMarker({
        map: this.map,
        geometries: markers
      })

      // 添加文本标记
      const labelStyle = {
        color: '#00c6ff',
        fontSize: '16px',
        fontWeight: 'bold',
        backgroundColor: 'rgba(0,24,48,0.85)',
        padding: '8px 15px',
        borderRadius: '4px',
        border: '2px solid rgba(0,198,255,0.5)',
        boxShadow: '0 2px 6px rgba(0,0,0,0.3)'
      }

      new TMap.MultiLabel({
        map: this.map,
        styles: { label: labelStyle },
        geometries: [{
          position: new TMap.LatLng(39.744568, 98.493843),
          content: '金泉路社区'
        }]
      })
    },
    initTimeAnalysisChart() {
      const chartDom = this.$refs.timeAnalysisChart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        radar: {
          indicator: [
            { name: '盗窃', max: 100 },
            { name: '殴打', max: 100 },
            { name: '电诈', max: 100 },
            { name: '其他', max: 100 }
          ],
          splitArea: {
            areaStyle: {
              color: ['rgba(0, 198, 255, 0.1)']
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            }
          }
        },
        series: [{
          type: 'radar',
          data: [{
            value: [65, 70, 30, 40],
            name: '案件分布',
            areaStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            },
            lineStyle: {
              color: '#00c6ff',
              width: 2
            },
            itemStyle: {
              color: '#00c6ff'
            }
          }]
        }]
      }
      myChart.setOption(option)
    },
    switchTrend(type) {
      this.activeTrend = type
      this.activeTrendLabel = this.trendData[type].label
      this.activeTrendValue = this.trendData[type].value
      this.updateTimeTrendChart()
    },
    initTimeTrendChart() {
      this.timeTrendChart = echarts.init(this.$refs.timeTrendChart)
      this.updateTimeTrendChart()
    },
    updateTimeTrendChart() {
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b}年: {c}起'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2022', '2023', '2024'],
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.7)'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.7)',
            formatter: '{value} 起'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.1)'
            }
          }
        },
        series: [{
          data: this.trendData[this.activeTrend].data,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: '#00c6ff',
            width: 3
          },
          itemStyle: {
            color: '#00c6ff',
            borderColor: '#fff',
            borderWidth: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 198, 255, 0.3)' },
              { offset: 1, color: 'rgba(0, 198, 255, 0.1)' }
            ])
          }
        }]
      }
      this.timeTrendChart.setOption(option)
    },
    startAutoScroll() {
      const container = this.$refs.supportFactors
      
      this.scrollInterval = setInterval(() => {
        if (this.isScrolling) {
          this.scrollPosition += this.scrollSpeed / 60 // 每帧移动的距离
          
          // 当滚动到底部时，重置到顶部
          if (this.scrollPosition >= container.scrollHeight - container.clientHeight) {
            this.scrollPosition = 0
          }
          
          container.scrollTop = this.scrollPosition
        }
      }, 1000 / 60) // 60fps
    },
    pauseScroll() {
      this.isScrolling = false
    },
    resumeScroll() {
      this.isScrolling = true
    }
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy()
    }
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval)
    }
  }
}
</script>

<style scoped>
.case-event-container {
  display: flex;
  gap: 20px;
  height: calc(100vh - 40px);
  width: 100%;
  padding: 20px;
  color: #fff;
  background: #001324;
  box-sizing: border-box;
  overflow: hidden;
}

.left-content, .right-content {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  padding-bottom: 20px;
}

.center-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 20px;
}

.map-container {
  flex: 3;
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100% - 40px);
}

.case-list {
  flex: 2;
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
}

#caseEventMap {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 4px;
  overflow: visible !important;
}

.stat-card {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 20px;
}

.card-title {
  color: #fff;
  font-size: 16px;
  margin-bottom: 15px;
  position: relative;
  padding-left: 10px;
}

.card-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #00c6ff;
}

.year-trend {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.trend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.year {
  width: 60px;
  color: rgba(255, 255, 255, 0.7);
}

.count {
  width: 60px;
  color: #00c6ff;
  font-weight: bold;
}

.trend-line {
  flex: 1;
  height: 6px;
  background: rgba(0, 198, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.line-fill {
  height: 100%;
  background: linear-gradient(to right, #00c6ff, #0082ff);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.trend-summary {
  margin-top: 15px;
  text-align: center;
  padding-top: 15px;
  border-top: 1px solid rgba(0, 198, 255, 0.3);
}

.trend-label {
  color: rgba(255, 255, 255, 0.7);
  margin-right: 10px;
}

.trend-value {
  color: #00c6ff;
  font-size: 24px;
  font-weight: bold;
}

.case-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
}

.case-item {
  display: flex;
  align-items: center;
  background: rgba(0, 24, 48, 0.3);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 12px;
  gap: 12px;
}

.case-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.case-type.刑事 {
  background: rgba(255, 77, 79, 0.2);
  color: #FF4D4F;
}

.case-type.治安 {
  background: rgba(24, 144, 255, 0.2);
  color: #1890FF;
}

.case-type.电诈 {
  background: rgba(250, 173, 20, 0.2);
  color: #FAAD14;
}

.case-info {
  flex: 1;
}

.case-title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 4px;
}

.case-time {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.case-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.case-status.已破获 {
  background: rgba(82, 196, 26, 0.2);
  color: #52C41A;
}

.case-status.处理中 {
  background: rgba(250, 173, 20, 0.2);
  color: #FAAD14;
}

.efficiency-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.efficiency-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.efficiency-value {
  color: #00c6ff;
  font-size: 24px;
  font-weight: bold;
}

.efficiency-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* 添加滚动条样式 */
.left-content::-webkit-scrollbar,
.center-content::-webkit-scrollbar,
.right-content::-webkit-scrollbar,
.case-items::-webkit-scrollbar {
  width: 6px;
}

.left-content::-webkit-scrollbar-thumb,
.center-content::-webkit-scrollbar-thumb,
.right-content::-webkit-scrollbar-thumb,
.case-items::-webkit-scrollbar-thumb {
  background: rgba(0, 198, 255, 0.3);
  border-radius: 3px;
}

.left-content::-webkit-scrollbar-track,
.center-content::-webkit-scrollbar-track,
.right-content::-webkit-scrollbar-track,
.case-items::-webkit-scrollbar-track {
  background: rgba(0, 24, 48, 0.3);
  border-radius: 3px;
}

.case-type-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.type-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 4px;
}

.type-label {
  color: rgba(255, 255, 255, 0.7);
}

.type-value {
  color: #00c6ff;
  font-weight: bold;
}

.governance-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.governance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.governance-value {
  color: #00c6ff;
  font-size: 24px;
  font-weight: bold;
}

.governance-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.warning-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warning-item {
  display: flex;
  align-items: center;
  background: rgba(0, 24, 48, 0.3);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 12px;
  gap: 12px;
}

.warning-time {
  color: #00c6ff;
  font-size: 14px;
  width: 60px;
}

.warning-content {
  flex: 1;
  color: #fff;
  font-size: 14px;
}

.warning-level {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.warning-level.高危 {
  background: rgba(255, 77, 79, 0.2);
  color: #FF4D4F;
}

.warning-level.中危 {
  background: rgba(250, 173, 20, 0.2);
  color: #FAAD14;
}

.warning-level.低危 {
  background: rgba(82, 196, 26, 0.2);
  color: #52C41A;
}

.analysis-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.analysis-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 4px;
}

.analysis-label {
  color: rgba(255, 255, 255, 0.7);
}

.analysis-value {
  color: #00c6ff;
  font-weight: bold;
}

.prevention-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.prevention-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.prevention-value {
  color: #00c6ff;
  font-size: 24px;
  font-weight: bold;
}

.prevention-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-align: center;
}

.time-trend-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.time-trend-buttons button {
  flex: 1;
  padding: 8px 0;
  background: rgba(0, 24, 48, 0.3);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s;
}

.time-trend-buttons button:hover {
  background: rgba(0, 198, 255, 0.1);
  color: #00c6ff;
}

.time-trend-buttons button.active {
  background: rgba(0, 198, 255, 0.2);
  border-color: #00c6ff;
  color: #00c6ff;
}

.support-factors {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 400px;
  overflow-y: auto;
  position: relative;
  scroll-behavior: smooth;
}

.support-factors::-webkit-scrollbar {
  display: none;
}

.factor-group {
  background: rgba(0, 24, 48, 0.3);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 15px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.factor-group:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.2);
}

.factor-title {
  color: #00c6ff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  padding-left: 8px;
  border-left: 3px solid #00c6ff;
}

.factor-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.factor-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.factor-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.factor-value {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding-left: 8px;
}

.factor-value div {
  margin: 2px 0;
}
</style> 